<template>
    <ph-action-bar class="ph-dt-header" v-if="umode==Mode.year||mode==Mode.year">
        <div class="ph-action-zone">
            <ph-button type="transparent" :mini="true" icon="angle-double-left" @click="$emit('year-shift',-15)"/>
        </div>
        <div class="ph-action-zone">
            {{year-7}}{{lang.year}} - {{year+7}}{{lang.year}}
        </div>
        <div class="ph-action-zone">
            <ph-button type="transparent" :mini="true" icon="angle-double-right" @click="$emit('year-shift',15)"/>
        </div>
    </ph-action-bar>
    <ph-action-bar class="ph-dt-header" v-else-if="umode==Mode.month||mode==Mode.month">
        <div class="ph-action-zone">
            <ph-button type="transparent" :mini="true" icon="angle-double-left" @click="$emit('year-shift',-1)"/>
        </div>
        <div class="ph-action-zone">
            {{year}}{{lang.year}}
        </div>
        <div class="ph-action-zone">
            <ph-button type="transparent" :mini="true" icon="angle-double-right" @click="$emit('year-shift',1)"/>
        </div>
    </ph-action-bar>
    <ph-action-bar class="ph-dt-header" v-else-if="mode==Mode.date">
        <div class="ph-action-zone">
            <ph-button type="transparent" :mini="true" icon="angle-double-left" @click="$emit('year-shift',-1)"/>
            <ph-button type="transparent" :mini="true" icon="angle-left" @click="$emit('month-shift',-1)"/>
        </div>
        <div class="ph-action-zone">
            <ph-button type="transparent" :mini="true" @click="$emit('year-navigate')">{{year}}{{lang.year}}</ph-button>
            <ph-button type="transparent" :mini="true" @click="$emit('month-navigate')">{{lang.months[month]}}</ph-button>
        </div>
        <div class="ph-action-zone">
            <ph-button type="transparent" :mini="true" icon="angle-right" @click="$emit('month-shift',1)"/>
            <ph-button type="transparent" :mini="true" icon="angle-double-right" @click="$emit('year-shift',1)"/>
        </div>
    </ph-action-bar>
    <ph-action-bar class="ph-dt-header ph-dt-header-time" v-else-if="mode==Mode.time">
        <ph-button type="transparent" :mini="true" v-if="showBackTime&&umode!=Mode.time" icon="angle-left" @click="$emit('back')"/>
        {{lang.timeChoose}}
    </ph-action-bar>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import {PhActionBar,PhButton} from '../base'
import {Mode} from './config'
export default defineComponent({
    components:{
        PhActionBar,PhButton
    },
    props:{
        lang:{type:Object as PropType<Record<string,unknown>>},
        showBackTime:{type:Boolean,default:true},
        mode:{type:Number},
        umode:{type:Number},
        year:{type:Number},
        month:{type:Number}
    },
    setup() {
        return {Mode}
    },
})
</script>

<style lang="scss" scoped>
.ph-dt-header{
    &-time
    {
        text-align: center;
        justify-content: center!important;
        .ph-action{
            position: absolute;
            left: var(--ph-15);
        }
    }
    .ph-action-zone{
        white-space: nowrap;
        display: flex;
        align-items: center;
    }
}
</style>